<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 
      衬线字体:serif;
      非衬线:sans-serif;
      等宽字体:monospace;
      草书字体:cursive;
      虚幻字体:fantasy;
      - 以上字体是对于各种字体的分组，诸如 衬线字体 是字体类似瘦金体，最后都有钩点等
      - 一般是放在font-family 样式最后，防止字体无样式，从组中选取的方式取决于浏览器，故不同浏览器从组中选取的可能大不相同
    -->
    <p style="font-family: serif">
        这是一个衬线字体
    </p>
    <p style="font-family: sans-serif">
        这是一个非衬线字体
    </p>
    <p style="font-family: monospace">
        这是一个等宽字体
    </p>
    <p style="font-family: cursive">
        这是一个草书字体
    </p>
    <p style="font-family: fantasy">
        这是一个虚幻字体
    </p>
</body>

</html>